<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container">
    <img src="@/assets/imgs/pic/3.png" class="article-pic" />
    <p
      class="hot"
      @click="jump(item.type, item)"
      v-for="(item, index) in data"
      :key="index"
    ></p>
    <aside v-if="current && current.type != 3">
      <section class="box">
        <span class="text" v-if="current.text">{{ current.text }}</span>
        <img
          :src="current.img"
          class="wx-img"
          v-if="current.img"
          style="    max-height: 4.6rem;"
        />
        <span class="closeBtn" @click="closeFn()"></span>
      </section>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: null,
      data: [
        { type: 2, img: require('../../assets/imgs/tfs.jpeg') },
        { type: 3, url: 'https://www.bangbangfa.cn' },
        {
          type: 3,
          url: 'https://shop101705128.m.youzan.com/v2/feature/ZLvM2QDadk',
        },
        {
          type: 3,
          url:
            'https://weixin.1919.cn/b2c1919/#/singlepage?id=1025953617454108672',
        },
        {
          type: 3,
          url:
            'https://prom.m.gome.com.cn/gcms/MobsaleS8OwWfcNxUj.html?stid=ACCH&cmpid=s_app01_copy&uid=86996926312',
        },
        {
          type: 3,
          url: 'https://shop41396066.m.youzan.com/v2/feature/B1D0ckBjER',
        },
        { type: 2, img: require('../../assets/imgs/jn.png') },
        {
          type: 3,
          url:
            'https://pro.m.jd.com/mall/active/aR867ENZvvSbPs6pu1dr8VGp9ik/index.html',
        },
      ],
    };
  },
  methods: {},
  mounted() {},
  methods: {
    jump(type, item) {
      this.current = item;
      if (type != 3) {
        return;
      }
      location.href = item.url;
    },
    closeFn() {
      this.current = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 100px;
  position: relative;
  p.hot {
    width: 90%;
    left: 5%;
    height: 5.1rem;
    position: absolute;
    z-index: 1;

    top: 10rem;
    &:nth-child(3) {
      top: 16.2rem;
    }
    &:nth-child(4) {
      top: 22.5rem;
    }
    &:nth-child(5) {
      top: 28.2rem;
    }
    &:nth-child(6) {
      top: 35.8rem;
    }
    &:nth-child(7) {
      top: 42rem;
    }
    &:nth-child(8) {
      top: 48.3rem;
    }
    &:nth-child(9) {
      top: 55rem;
    }
  }
}
</style>
